<template>
  <div>
    <div class="mychannels">
      <div>
        <span class="mychannel">我的频道</span>
        <span class="more">点击{{isEdit?'删除':'进入'}}频道</span>
      </div>
      <span class="edit" @click="isChangeEdit">{{isEdit?'完成':'编辑'}}</span>
    </div>
    <div class="mychannel-content">
      <van-row type="flex">
        <van-col span="6" v-for="(obj,index) in channelsUserList" :key="obj.id" @click="deletechannels(obj,obj.id)">
            <div class="van-cols">{{obj.name}}
            <van-icon name="cross" size="0.3rem" v-show="isEdit&&obj.id!==0" @click="deletechannels(obj,index)"/>
            </div>
        </van-col>
      </van-row>
    </div>
    <div class="morechannels">
        <span class="morechannel">点击添加更多频道:</span>
        <div class="morechannels-content">
            <van-row type="flex">
                <van-col span="6" v-for="(obj) in Unselect" :key="obj.id">
                    <div class="van-cols" @click="addchannels(obj)">{{obj.name}}
                    </div>
                </van-col>
            </van-row>
        </div>
    </div>
  </div>
</template>

<script>
// 目标1: 编辑频道->显示x和不同的文字
// 1. 定义isEdit变量, 来控制x是否显示
// 2. 编辑span标签点击时, isEdit取反
// 3. isEdit变量控制文字的不同显示, 以及推荐频道上x, 额外判断条件

// 目标2: 编辑频道后 -> 点击更多频道进行新增
// 1. 更多频道->绑定点击事件, 传递频道对象下去, 下去之后要做一个判断(只有编辑状态才生效)
// 2. 子->父, 把频道对象传递给Home/index.vue -> 父push到用户已选的频道数组内即可
export default {
  name: 'channelRdit',
  props: {
    channelsUserList: Array, // 用户已选频道列表
    Unselect: Array // 用户未选频道列表
  },
  data () {
    return {
      isEdit: false// 编辑频道上编辑状态(x隐藏)
    }
  },
  methods: {
    // 修改编辑状态
    isChangeEdit () {
      this.isEdit = !this.isEdit
    },
    // 添加频道
    addchannels (obj) {
      if (this.isEdit === true) { // 只有在编辑状态才可以添加频道
        this.$emit('AddChannels', obj) // 为什么不直接在这里push新的频道进用户已选频道列表内，而是要用自定义事件，通知父组件push新频道
        // 因为我们的用户已选频道列表是从home组件传过来的，vue讲究数据单向流，虽然在这里也可以直接push 但是还是在数据源那里操作比较好
      }
    },
    // 删除频道
    deletechannels (obj, index) {
      if (this.isEdit === true && obj.id !== 0) { // 只有在编辑状态才可以删除频道
        this.$emit('DeleteChannels', obj, index) // 删除跟新增一样，最好在数据源出修改数据
      } else if (this.isEdit === false) { // 不是在编辑状态下点击 就是跳到指定的频道
        this.$emit('closeshow', false)// 通过自定义事件关闭弹出层
        this.$emit('input', obj.id)
        // 触发v-model绑定的input事件
        // 把值传出去，绑定给v-model对应的vue变量
      }
    }
  }
}
</script>

<style  scoped lang='less'>
.mychannels {
  display: flex;
  justify-content: space-between;
  line-height: 27px;
  .mychannel {
    font-size: 14px;
    padding: 0 6px;
  }
  .edit {
    font-size: 14px;
    padding-right: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .more {
    color: gray;
    font-size: 10px;
  }
}
.mychannel-content{
    .van-cols{
        position: relative;
        font-size: 12px;
        text-align: center;
        line-height: 36px;
        margin: 5px;
        background-color: #fafafa;
            .van-icon{
            position: absolute;
            right: 0;
            top: 0;
            z-index: 999px;
            font-size: 12px;
            color: rgb(207,207,207)
        }
    }
}
.morechannel{
    font-size: 14px;
    margin: 5px 5px;
}
.morechannels-content{
    .van-cols{
        font-size: 12px;
        text-align: center;
        line-height: 36px;
        margin: 5px;
        background-color: #fafafa
    }
}
</style>
